<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <!-- 父盒子，主要用来居中显示 -->
    <div class="box">
        <!-- 卡片整体盒子 --color是图文对应主题的颜色变量，文字颜色过渡动画使用 -->
        <div class="card" style="--color: #0d9545;">
            <img src="./image/山.jpeg" alt="山">

            <div class="text-box">
                <h2>山</h2>
                <p>
                    远山如画，层峦叠翠。云雾缥缈，神秘莫测。树木随季变色，春绿秋红冬白。溪流清澈波光，与山相映成趣。
                </p>
            </div>
        </div>

        <div class="card" style="--color: #45b9dd;">
            <img src="./image/海.jpeg" alt="海">

            <div class="text-box">
                <h2>海</h2>
                <p>
                    海面如镜，蓝天相映。风帆如鸽，自由翱翔。沙滩如绸，贝壳珊瑚点缀。鱼儿如花，水中彩绘美景。
                </p>
            </div>
        </div>
    </div>

</body>

</html>